<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">切换状态</text>
         <view class="uv-demo-block__content">
            <uv-switch v-model="loading" @change="changeLoading"></uv-switch>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">是否开启动画</text>
         <view class="uv-demo-block__content">
            <uv-switch v-model="animate" @change="change"></uv-switch>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础使用</text>
         <view class="uv-demo-block__content">
            <uv-skeleton :loading="loading" :skeleton="skeleton1" :animate="animate">
               <uv-text
                  text="uv-ui破釜沉舟之兼容vue3+2、nvue、app、h5、多端小程序的uni-app生态框架"
                  color="#222"
                  size="30rpx"
                  bold
                  lines="1"
               ></uv-text>
               <uv-text
                  text="大部分组件基于uView2.x，在经过改进后全面支持vue3，部分组件做了进一步的优化，支持单独导入，方便开发者选择导入需要的组件。"
                  lines="1"
                  color="#222"
                  size="30rpx"
                  margin="8rpx 0 0"
               ></uv-text>
               <uv-text
                  text="uv-ui来源于社区，也回归到社区，正是有一群热爱uni-app生态的同学推着它前行，而我们也一如既往的承诺，uv-ui永久开源，永远免费。我们会在部分组件下载时配置广告抵消一部分成本，希望大家理解。"
                  lines="1"
                  color="#222"
                  size="30rpx"
                  margin="8rpx 0 0"
               ></uv-text>
            </uv-skeleton>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义样式</text>
         <view class="uv-demo-block__content">
            <uv-skeleton :loading="loading" :skeleton="skeleton2" :animate="animate">
               <uv-text text="uv-ui" color="#222" size="30rpx" bold></uv-text>
               <uv-text
                  text="uv-ui破釜沉舟之兼容vue3+2、nvue、app、h5"
                  color="#222"
                  size="30rpx"
                  lines="1"
                  margin="30rpx 0 0"
               ></uv-text>
               <uv-text
                  text="多端小程序的uni-app生态框架。大部分组件基于uView2.x，在经过改进后全面支持vue3，部分组件做了进一步的优化，支持单独导入，方便开发者选择导入需要的组件。"
                  color="#222"
                  size="30rpx"
                  lines="1"
                  margin="18rpx 0 0"
               ></uv-text>
               <uv-text
                  text="欢迎大家使用，也希望大家积极参与"
                  lines="1"
                  color="#222"
                  size="30rpx"
                  margin="18rpx 0 0"
               ></uv-text>
            </uv-skeleton>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">横向并列布局</text>
         <view class="uv-demo-block__content">
            <uv-skeleton :loading="loading" :skeleton="skeleton3" :animate="animate">
               <view class="uv-block__flex">
                  <view class="avatar">
                     <uv-avatar
                        src="https://www.uvuix.cn/common/logo.png"
                        size="100rpx"
                     ></uv-avatar>
                  </view>
                  <view class="lines">
                     <uv-text text="uv-ui" color="#222" size="30rpx" bold></uv-text>
                     <uv-text
                        text="uv-ui破釜沉舟之兼容vue3+2、nvue、app、h5"
                        color="#222"
                        size="30rpx"
                        lines="1"
                        margin="18rpx 0 0"
                     ></uv-text>
                     <uv-text
                        text="欢迎大家使用..."
                        lines="1"
                        color="#222"
                        size="30rpx"
                        margin="18rpx 0 0"
                     ></uv-text>
                  </view>
               </view>
            </uv-skeleton>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">混合布局</text>
         <view class="uv-demo-block__content">
            <uv-skeleton :loading="loading" :skeleton="skeleton4" :animate="animate">
               <uv-skeleton :loading="loading" :skeleton="skeleton4" :animate="animate">
                  <view class="uv-skeletons__row uv-skeletons__row1">
                     <view class="uv-skeletons__row1--left">
                        <image class="img" src="https://dummyimage.com/200x200/3c9cff/fff"></image>
                     </view>
                     <view class="uv-skeletons__row1--right">
                        <uv-text
                           text="uv-ui破釜沉舟之兼容vue3+2、nvue、app、h5"
                           color="#222"
                           size="30rpx"
                           lines="1"
                        ></uv-text>
                        <uv-text
                           text="在经过改进后全面支持vue3"
                           color="#222"
                           size="30rpx"
                           lines="1"
                           margin="6rpx 0 0"
                        ></uv-text>
                        <uv-text
                           text="欢迎大家使用"
                           lines="1"
                           color="#222"
                           size="30rpx"
                           margin="6rpx 0 0"
                        ></uv-text>
                     </view>
                  </view>
                  <view style="height: 30rpx"></view>
                  <view class="uv-skeletons__row uv-skeletons__row2">
                     <image class="img" src="https://dummyimage.com/200x200/3c9cff/fff"></image>
                     <image class="img" src="https://dummyimage.com/200x200/f9ae3d/fff"></image>
                     <image class="img" src="https://dummyimage.com/200x200/5ac725/fff"></image>
                     <image class="img" src="https://dummyimage.com/200x200/f56c6c/fff"></image>
                     <image class="img" src="https://dummyimage.com/200x200/909399/fff"></image>
                  </view>
                  <view style="height: 30rpx"></view>
                  <view class="uv-skeletons__row uv-skeletons__row3">
                     <view class="uv-skeletons__row3--left">
                        <uv-text
                           text="uv-ui破釜沉舟之兼容vue3+2、nvue、app、h5、多端小程序的uni-app生态框架"
                           color="#222"
                           size="30rpx"
                           bold
                           lines="1"
                        ></uv-text>
                        <uv-text
                           text="大部分组件基于uView2.x，在经过改进后全面支持vue3，部分组件做了进一步的优化，支持单独导入，方便开发者选择导入需要的组件。"
                           lines="1"
                           color="#222"
                           size="30rpx"
                           margin="8rpx 0 0"
                        ></uv-text>
                        <uv-text
                           text="uv-ui来源于社区，也回归到社区，正是有一群热爱uni-app生态的同学推着它前行，而我们也一如既往的承诺，uv-ui永久开源，永远免费。我们会在部分组件下载时配置广告抵消一部分成本，希望大家理解。"
                           lines="1"
                           color="#222"
                           size="30rpx"
                           margin="8rpx 0 0"
                        ></uv-text>
                     </view>
                     <view class="uv-skeletons__row3--right">
                        <image class="img" src="https://dummyimage.com/200x200/3c9cff/fff"></image>
                     </view>
                  </view>
               </uv-skeleton>
            </uv-skeleton>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 类型定义
interface SkeletonItem {
   type: 'line' | 'flex' | 'avatar' | 'custom';
   num?: number;
   gap?: string;
   style?: string | string[];
   children?: SkeletonItem[];
}

type SkeletonConfig = (SkeletonItem | number)[];

// 响应式数据
const loading = ref<boolean>(true);
const animate = ref<boolean>(true);

// 基础使用 - 简单的线条骨架
const skeleton1 = ref<SkeletonConfig>([
   {
      type: 'line',
      num: 3,
      gap: '20rpx',
   },
]);

// 自定义样式 - 不同长度的线条
const skeleton2 = ref<SkeletonConfig>([
   {
      type: 'line',
      num: 4,
      gap: '20rpx',
      style: ['width: 200rpx;height:50rpx;marginBottom: 20rpx;', null, null, 'width: 500rpx;'],
   },
]);

// 横向并列布局 - 头像 + 文本行
const skeleton3 = ref<SkeletonConfig>([
   {
      type: 'flex',
      num: 1,
      children: [
         {
            type: 'avatar',
            num: 1,
            style: 'marginRight: 10rpx;',
         },
         {
            type: 'line',
            num: 3,
            gap: '30rpx',
            style: ['width: 200rpx;', null, 'width:400rpx;'],
         },
      ],
   },
]);

// 混合布局 - 复杂的多行布局
const skeleton4 = ref<SkeletonConfig>([
   // 第一行：图片 + 文本
   {
      type: 'flex',
      num: 1,
      children: [
         {
            type: 'custom',
            num: 1,
            style: 'width:136rpx;height:136rpx;marginRight: 30rpx;',
         },
         {
            type: 'line',
            num: 3,
            style: [null, 'width:360rpx;', 'width:200rpx;'],
         },
      ],
   },
   // 间距
   30,
   // 第二行：多个小图片
   {
      type: 'flex',
      children: [
         {
            type: 'custom',
            style: 'width:98rpx;height:160rpx;',
         },
         {
            type: 'custom',
            style: 'width:98rpx;height:160rpx;marginLeft:50rpx;',
         },
         {
            type: 'custom',
            style: 'width:98rpx;height:160rpx;marginLeft:50rpx;',
         },
         {
            type: 'custom',
            style: 'width:98rpx;height:160rpx;marginLeft:50rpx;',
         },
         {
            type: 'custom',
            style: 'width:98rpx;height:160rpx;marginLeft:50rpx;',
         },
      ],
   },
   // 间距
   30,
   // 第三行：文本 + 图片
   {
      type: 'flex',
      children: [
         {
            type: 'line',
            num: 3,
            gap: '30rpx',
         },
         {
            type: 'custom',
            style: 'width:160rpx;height:160rpx;marginLeft: 30rpx;',
         },
      ],
   },
]);

// 方法
/**
 * 动画开关变化处理
 * @param e 开关状态
 */
const change = (e: boolean) => {
   animate.value = e;
};

/**
 * 加载状态变化处理
 * @param e 加载状态
 */
const changeLoading = (e: boolean) => {
   loading.value = e;
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 15px 30rpx 40px;
}
.uv-block__flex {
   flex-direction: row;
   .lines {
      margin-left: 10rpx;
      width: 560rpx;
   }
}
.uv-skeletons__row {
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   flex-direction: row;
}
.uv-skeletons__row1 {
   &--left {
      width: 136rpx;
      height: 136rpx;
      margin-right: 30rpx;
      .img {
         width: 136rpx;
         height: 136rpx;
      }
   }
   &--right {
      flex: 1;
   }
}
.uv-skeletons__row2 {
   justify-content: space-between;
   .img {
      width: 98rpx;
      height: 160rpx;
   }
}
.uv-skeletons__row3 {
   &--left {
      flex: 1;
   }
   &--right {
      .img {
         width: 160rpx;
         height: 160rpx;
      }
   }
}
</style>
